<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta_new" /}
</head>
<body class="F5">
<div id="app" class="mini-mall">
    <!-- header -->
    <div class="header">
        <div class="header-height"></div>
        <div class="header-wrap">
            <div class="header-content">
                <div class="left">
                    <!-- <div class="go-back"><img src="/static/images/go-back.png" alt=""></div> -->
                    <div class="text">商城</div>
                </div>
                <div class="title"></div>
            </div>
        </div>
    </div>

    <!-- 搜索 -->
    <div class="top-box">
        <div class="search-box">
            <img src="/static/images/mini/search-icon.png" class="icon"/>
            <input type="text" class="input" placeholder="请输入关键词">
            <div class="btn" onclick="search()">搜索</div>
        </div>
    </div>

    <div class="recommend-box">
        <div class="list">

        </div>
    </div>

    {include file="common/foot_new" /}
</div>
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<script>
    var name = '';
    var page = 1;
    var pagesize = 10;

    renderGoodsList('', page, pagesize);

    function search() {
        name = $('.input').val();
        page = 1;

        $('html, body').scrollTop(0);

        renderGoodsList(name, page, pagesize);
    }

    function renderGoodsList(name = '', incPage = 1, pagesize = 10) {
        goodsList(name, incPage, pagesize).then(res => {
            if (res.result == 1) {
                var html = ''
                res.data.forEach(val => {
                    html += `<div class="item">
                <div class="product-image">
                    <img src="`+ val.img +`" alt="">
                </div>
                <div class="product-title ellipsis-1">` + val.name + `</div>
                <div class="bottom">
                    <div class="point-box">
                        <span>` + val.min_price + `</span>
                    </div>
                    <a href="#" class="btn">立即购买</a>
                </div>
            </div>`
                })

                page = incPage + 1;

                if (incPage == 1) {
                    $('.list').html(html);
                }else{
                    $('.list').append(html);
                }
            } else {
                if (incPage == 1) {
                    $('.list').html('');
                } else {
                    layer.msg(res.msg)
                }
            }
        }).catch(error => {
            layer.msg('请求失败')
        });
    }

    window.addEventListener('scroll', function () {
        // 获取页面的滚动高度、视口高度和文档总高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

        // 判断是否滚动到页面底部
        if (scrollTop + clientHeight >= scrollHeight) {
            renderGoodsList(name, page, pagesize);
        }
    });
</script>
</body>
</html>